<template>
    <div class="home">
        <div class="top-swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in banner" :key="index"><img :src="item.banner_img" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="index-kinds">
            <ul>
                <li>
                    <svg t="1597836791404" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3195" width="200" height="200">
                        <path d="M985.401991 231.3353h-78.763721v-22.33259l-26.77066-10.510357c-5.353927-2.09982-132.713339-51.583739-244.122509-51.583739-52.161906 0-93.896342 10.750833-124.682448 32.040676-30.814758-21.289843-72.506216-32.040676-124.69575-32.040676-111.394844 0-238.754255 49.483919-244.122509 51.583739l-26.743031 10.510357v22.33259H38.598009c-17.458592 0-31.618052 14.160483-31.618051 31.617028V845.474357c0 17.457569 14.160483 31.618052 31.618051 31.618052h946.803982c17.457569 0 31.617028-14.161506 31.617028-31.618052V262.952328c0.001023-17.456546-14.15946-31.617028-31.617028-31.617028z m-120.920782 6.411001v462.293c-65.306248-22.361242-238.754255-73.042427-332.339513-18.402078V216.018483c26.389991-19.711908 63.531838-26.939505 103.603405-26.939505 104.702434 0 228.736107 48.667322 228.736108 48.667323z m-47.764768 491.105152h-277.980573c54.246376-51.456849 188.53765-26.714378 277.980573 0z m-430.349538-539.772475c40.071567 0 77.226718 7.242947 103.617731 26.939505v465.617716c-93.613911-54.612719-267.033265-3.95814-332.339513 18.402079V237.746301c-0.001023 0 124.018324-48.667322 228.721782-48.667323z m97.009233 539.772475H205.339281c89.41427-26.742007 223.776152-51.526434 278.036855 0z m470.393477 84.99155H70.216061V294.583683h45.285302V771.008514h791.13793V294.583683h47.131343v519.25932z"
                              p-id="3196" fill="#1296db"></path>
                    </svg>
                    <span>特色课</span>
                </li>
                <li>
                    <svg t="1597837111220" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="4075" width="200" height="200">
                        <path d="M851.2 298.4c48.8 0 88.3 39.6 88.3 88.3v230.7c0 48.8-39.5 88.4-88.3 88.4h-51.1c0.2 3.4-2.4 0.1 4.7 19.4 14.2 38.5 23.4 63.6 21.3 73.3-2.8 13-14.7 16-41.9-1.4-25.9-16.6-103.9-61.7-142.4-91.3H438.9c-31.8 0-59.7-16.8-75.3-42-4.1-6.7-7.4-14-9.6-21.7-2.3-7.8-3.5-16.1-3.5-24.7V386.8c0-48.8 39.5-88.3 88.4-88.3h412.3v-0.1z m-156.9-22.3H437c-30.5 0-58.3 12.4-78.3 32.4s-32.4 47.8-32.4 78.3v230.7c0 13.4 2.4 26.4 6.8 38.3 2.7 7.4 6.2 14.5 10.4 21 4.4 6.9 9.5 13.2 15.2 18.9 20 20 47.8 32.4 78.3 32.4h195.4c9 6.6 19.2 13.6 30 20.8 20.1 13.2 42.3 26.9 61.9 38.9 19.6 11.9 36.7 22.2 45.8 28.1 7.5 4.8 14.3 8.5 20.9 11.2 6.7 2.6 13.3 4.4 20.6 4.5 3.9 0 8-0.6 12.1-2 3.1-1.1 6-2.6 8.7-4.6 4-2.9 7.1-6.8 9.2-10.5 2.1-3.8 3.4-7.6 4.1-11.2 0.6-2.9 0.8-5.5 0.8-7.9 0-5.7-0.9-10.6-2.2-15.9-1.9-8-4.7-16.7-8.2-27-2.5-7.4-5.5-15.5-8.7-24.3H849c30.5 0 58.3-12.4 78.3-32.4s32.4-47.8 32.4-78.3V386.8c0-30.5-12.4-58.3-32.4-78.3s-47.8-32.4-78.3-32.4H694.3z"
                              p-id="4076"></path>
                        <path d="M694.3 276.1c-4.9-19.7-15.2-37.4-29.1-51.3-20-20-47.8-32.4-78.3-32.4H174.7c-30.5 0-58.3 12.4-78.3 32.4S64 272.6 64 303v230.7c0 30.5 12.4 58.3 32.4 78.3s47.8 32.4 78.3 32.4h21.6c-3.2 8.8-6.2 16.9-8.7 24.3-3.5 10.2-6.3 19-8.2 27-1.2 5.4-2.1 10.3-2.2 15.9 0 2.4 0.2 5 0.8 7.9 0.8 3.6 2 7.4 4.1 11.2 2.1 3.8 5.2 7.6 9.2 10.5 2.7 2 5.6 3.5 8.7 4.6 4.1 1.4 8.2 2 12.1 2 7.4 0 14-1.8 20.6-4.5 6.7-2.7 13.5-6.4 20.9-11.2 9.2-5.9 26.3-16.2 45.9-28.1 13.9-8.5 29.2-17.9 44-27.3-4.2-6.6-7.7-13.6-10.4-21-36.3 23.2-76.2 46.7-93.4 57.7-27.2 17.4-39.1 14.4-41.9 1.4-2.1-9.8 7.1-34.8 21.3-73.3 7.1-19.3 4.5-16 4.7-19.4h-51.1c-48.8 0-88.3-39.6-88.3-88.4V303.1c0-48.8 39.5-88.3 88.3-88.3H585c39.4 0 72.8 25.8 84.2 61.4h25.1z"
                              p-id="4077"></path>
                        <path d="M518 498.8c0-11.8-9.5-21.3-21.3-21.3s-21.3 9.5-21.3 21.3 9.5 21.3 21.3 21.3 21.3-9.5 21.3-21.3z"
                              p-id="4078"></path>
                        <path d="M595.5 498.8m-21.3 0a21.3 21.3 0 1 0 42.6 0 21.3 21.3 0 1 0-42.6 0Z"
                              p-id="4079"></path>
                        <path d="M696.2 477.5c-11.8 0-21.3 9.5-21.3 21.3s9.5 21.3 21.3 21.3h1.4c11.1-0.7 19.9-10 19.9-21.3s-8.8-20.5-19.9-21.3h-1.4z"
                              p-id="4080"></path>
                        <path d="M800.8 498.8m-21.3 0a21.3 21.3 0 1 0 42.6 0 21.3 21.3 0 1 0-42.6 0Z"
                              p-id="4081"></path>
                    </svg>
                    <span>一对一辅导</span>
                </li>
                <li>
                    <svg t="1597837222104" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="5173" width="200" height="200">
                        <path d="M525.4144 827.4432l-0.768 0.6144V839.68a325.3248 325.3248 0 0 1 56.0128-27.392c4.352-1.7408 32.6656-17.2032 37.376-18.7392-1.6384-6.4512-3.072-13.0048-4.3008-19.6096a505.7024 505.7024 0 0 0-88.32 53.504z"
                              fill="#FF00FF" p-id="5174"></path>
                        <path d="M654.7968 799.7952a254.1568 254.1568 0 0 1-11.3152-52.7872l-2.3552-21.9648-19.3024 6.7072c-32.8704 11.4176-87.7568 42.9056-116.224 66.2528-2.0992 1.6384-4.1472 3.3792-6.4 5.12a25.6 25.6 0 0 0-8.192 19.0976v40.448a24.576 24.576 0 0 0 11.2128 21.2992 18.6368 18.6368 0 0 0 20.48-0.9216 556.5952 556.5952 0 0 1 92.16-50.4832 267.8784 267.8784 0 0 1 27.8016-9.0624l18.0224-4.864zM524.4416 839.68v-11.3152l0.768-0.6144a505.7024 505.7024 0 0 1 88.1152-53.6576c1.2288 6.6048 2.6624 13.1584 4.3008 19.6096-4.7104 1.536-33.024 16.9984-37.376 18.7392a325.3248 325.3248 0 0 0-55.808 27.2384z"
                              p-id="5175"></path>
                        <path d="M302.08 767.0784a214.1184 214.1184 0 0 0-88.2176 19.0976 246.0672 246.0672 0 0 0-56.8832 35.2256v12.3392a299.1616 299.1616 0 0 1 56.0128-26.0096 263.3216 263.3216 0 0 1 184.32 2.304 303.5648 303.5648 0 0 1 57.7536 28.7232v-10.5984l-1.0752-0.9728c-45.4144-39.3216-97.9456-60.1088-151.9104-60.1088z"
                              fill="#FF00FF" p-id="5176"></path>
                        <path d="M480.8704 804.1472l-5.6832-5.12-0.3072-0.3072c-51.2-44.5952-111.104-68.1472-172.8512-68.1472a244.3776 244.3776 0 0 0-100.8128 21.76 282.2144 282.2144 0 0 0-69.5808 44.2368 24.8832 24.8832 0 0 0-8.1408 18.8416v42.6496a23.808 23.808 0 0 0 10.8544 20.48 18.0736 18.0736 0 0 0 19.9168-0.8192 273.0496 273.0496 0 0 1 68.864-35.4304 233.6256 233.6256 0 0 1 163.2256 2.048 281.1392 281.1392 0 0 1 71.68 39.5264 18.0224 18.0224 0 0 0 10.8544 3.6864 17.6128 17.6128 0 0 0 8.8064-2.3552 22.8352 22.8352 0 0 0 10.752-19.9168v-43.4688a23.6544 23.6544 0 0 0-7.5776-17.664z m-323.9424 29.5936v-12.3392a246.0672 246.0672 0 0 1 56.8832-35.2256A214.1184 214.1184 0 0 1 302.08 767.0784c54.016 0 106.5472 20.7872 151.8592 60.1088l1.0752 0.9728v10.5984a303.5648 303.5648 0 0 0-57.7536-28.7232 263.3216 263.3216 0 0 0-184.32-2.304 299.1616 299.1616 0 0 0-56.0128 26.0096z"
                              p-id="5177"></path>
                        <path d="M840.0384 195.4304a300.5952 300.5952 0 0 0-60.0576-24.4224 332.8 332.8 0 0 0-181.5552 0 302.08 302.08 0 0 0-67.9936 29.184l1.3312 509.9008a354.4576 354.4576 0 0 1 58.1632-21.1456c1.1264-4.5568 2.4064-9.0624 3.84-13.4656 0-0.6656 0.4608-1.28 0.6656-1.8944 1.3824-4.096 2.9184-8.1408 4.5568-12.1344 0-0.512 0.4608-1.024 0.7168-1.5872 1.6896-3.9936 3.5328-7.936 5.5296-11.776l0.6656-1.1776c2.048-3.9424 4.2496-7.7824 6.5536-11.52l0.4608-0.7168c2.4064-3.84 5.12-7.6288 7.68-11.264 2.7136-3.6864 5.5296-7.168 8.4992-10.5984l0.4608-0.5632c2.8672-3.2768 5.8368-6.4 8.9088-9.4208 0.3072-0.3072 0.5632-0.6144 0.8704-0.8704 3.0208-2.9696 6.144-5.7344 9.3184-8.448l1.1776-0.9728c3.1744-2.6112 6.4-5.12 9.728-7.424l1.4336-1.024c3.328-2.304 6.7072-4.4544 10.24-6.5024l1.5872-0.9728c3.4816-1.9968 7.0144-3.84 10.5984-5.5808l1.6896-0.8192c3.6352-1.6896 7.3216-3.2256 11.0592-4.6592l1.6384-0.6144c3.7888-1.3824 7.68-2.6624 11.5712-3.7888l1.536-0.4096c3.9936-1.0752 8.0384-1.9968 12.0832-2.7648h1.28c4.1984-0.768 8.448-1.3824 12.7488-1.7408h0.768a149.504 149.504 0 0 1 13.568-0.6144c3.5328 0 7.0144 0 10.5472 0.3584h2.7648c3.072 0.256 6.144 0.5632 9.1648 1.024h1.3824c3.4304 0.5632 6.8096 1.2288 10.24 1.9456l2.56 0.6144c2.816 0.7168 5.632 1.4848 8.3968 2.304l1.9456 0.5632c3.2768 1.024 6.5536 2.2016 9.728 3.4304l2.2528 0.9216c2.6112 1.0752 5.12 2.2016 7.8336 3.4304l2.2016 1.024q4.6592 2.304 9.216 5.12l1.5872 0.9216c2.56 1.536 5.12 3.1232 7.6288 4.8128l1.3312 0.8192zM305.664 158.4128a321.1264 321.1264 0 0 0-90.2144 12.544c-17.6128 5.12-39.168 5.12-55.1936 13.2608a17.664 17.664 0 0 0-9.2672 15.9744l4.6592 506.368a385.4848 385.4848 0 0 1 308.1216 3.6864l4.4032-506.4192a17.7664 17.7664 0 0 0-8.8064-15.7696c-18.2784-9.8816-42.3424-10.752-63.1808-16.8448a325.9392 325.9392 0 0 0-90.5216-12.8z"
                              fill="#F29BF9" p-id="5178"></path>
                        <path d="M590.9504 688.9472a369.3568 369.3568 0 0 0-59.1872 21.1456V200.192a298.8544 298.8544 0 0 1 67.7376-29.1328 329.8304 329.8304 0 0 1 180.736 0 301.7728 301.7728 0 0 1 50.4832 19.5584 17.8176 17.8176 0 0 1 9.3184 16.0256v376.1664c-0.4608-0.3072 10.7008 7.7824 16.3328 12.7488 3.9424 3.4816 7.7824 7.168 11.4688 11.0592 1.6896 1.792 3.328 3.6352 5.12 5.4784V174.08l-8.4992-5.12A325.888 325.888 0 0 0 788.48 136.6528 357.888 357.888 0 0 0 689.8688 122.88a352.768 352.768 0 0 0-98.9184 13.9264A326.1952 326.1952 0 0 0 506.88 174.5408l-8.0384 5.12v558.08a16.4352 16.4352 0 0 0 23.808 15.8208 331.8784 331.8784 0 0 1 62.8736-26.5216 179.2 179.2 0 0 1 1.7408-18.8416c0.3584-2.7136 0.768-5.4272 1.28-8.0896M404.48 136.7552a360.0896 360.0896 0 0 0-197.632 0A318.9248 318.9248 0 0 0 131.4304 168.96L122.88 174.08v559.4624a16.4864 16.4864 0 0 0 23.4496 16.0256A345.6 345.6 0 0 1 305.664 711.68a346.0096 346.0096 0 0 1 167.0656 42.0864 16.4864 16.4864 0 0 0 23.9104-15.872v-558.08l-8.0896-5.12A323.6864 323.6864 0 0 0 404.48 136.7552z m59.136 573.44A385.4848 385.4848 0 0 0 155.648 706.56V195.4304a292.1984 292.1984 0 0 1 59.8016-24.4736 321.1264 321.1264 0 0 1 90.2144-12.544 325.9392 325.9392 0 0 1 90.5216 12.6464 294.5536 294.5536 0 0 1 67.584 29.0304z"
                              p-id="5179"></path>
                        <path d="M632.832 760.6272a121.1392 121.1392 0 0 0 6.6048 24.6784c1.024 2.6624 2.1504 5.12 3.328 7.8848a123.392 123.392 0 0 0 235.52-51.968 123.392 123.392 0 0 0-244.6336-24.4224 124.928 124.928 0 0 0-0.8192 43.6736z"
                              fill="#FF00FF" p-id="5180"></path>
                        <path d="M866.4576 635.9552c-1.4848-1.5872-3.0208-3.1744-4.5568-4.6592-3.4304-3.328-6.912-6.4512-10.5472-9.4208a162.1504 162.1504 0 0 0-16.3328-11.52c-2.304-1.4336-4.6592-2.816-7.0144-4.096l-1.4336-0.8192c-2.816-1.4848-5.632-2.8672-8.4992-4.1472l-2.048-0.9216q-3.584-1.536-7.2192-2.9184l-1.9968-0.768c-2.9696-1.0752-5.9392-2.048-8.96-2.9184l-1.8432-0.512c-2.56-0.7168-5.12-1.3312-7.68-1.8944l-2.3552-0.5632c-3.1232-0.6144-6.2464-1.1776-9.3696-1.6384h-1.28c-2.816-0.3584-5.5808-0.6656-8.3968-0.8704h-2.56c-3.2256 0-6.4512-0.3072-9.728-0.3072-4.1984 0-8.3456 0-12.4416 0.512h-0.7168c-3.9424 0.3072-7.8336 0.8192-11.7248 1.4848h-1.1264c-3.7888 0.6656-7.4752 1.4848-11.1616 2.4064l-1.3824 0.3584c-3.6352 0.9216-7.168 1.9968-10.6496 3.1744l-1.536 0.512q-5.12 1.8432-10.24 3.9936l-1.536 0.6656c-3.328 1.4848-6.5536 3.072-9.7792 4.8128l-1.4336 0.768c-3.1744 1.7408-6.2976 3.584-9.3184 5.5296l-1.3312 0.8704c-3.072 1.9968-6.0416 4.1472-8.96 6.3488l-1.0752 0.8704c-2.9184 2.2528-5.7856 4.6592-8.5504 7.1168l-0.8192 0.768c-2.816 2.56-5.5296 5.12-8.192 8.0384l-0.4096 0.4608c-2.7136 2.9184-5.12 5.888-7.8336 9.0112-2.4576 3.1232-4.8128 6.3488-7.0656 9.6256a5.12 5.12 0 0 1-0.4096 0.5632c-2.1504 3.1744-4.1472 6.4512-6.0416 9.8304a6.5536 6.5536 0 0 0-0.5632 1.024c-1.8432 3.2256-3.5328 6.6048-5.12 10.24l-0.6656 1.3312c-1.4848 3.3792-2.9184 6.8096-4.1984 10.24 0 0.512-0.3584 1.024-0.5632 1.5872-1.2288 3.4816-2.3552 7.0144-3.328 10.5984s-1.8432 7.0144-2.56 10.5984c-0.4608 2.2528-0.8192 4.5568-1.1776 6.8608a153.9584 153.9584 0 0 0-1.5872 16.0768v7.2192c0 3.584 0 7.168 0.4608 10.8032 0.3072 4.4544 0.768 8.9088 1.4336 13.312 0 0.6656 0.3072 1.3312 0.4096 1.9968a157.7472 157.7472 0 0 0 4.0448 17.5104c0.256 0.7168 0.4608 1.4336 0.6656 2.1504a165.4784 165.4784 0 0 0 6.0928 16.128c0.4096 0.9216 0.768 1.8944 1.2288 2.8672 1.7408 3.7376 3.6864 7.3728 5.6832 10.9056a153.6 153.6 0 0 0 287.1808-75.6736 152.2688 152.2688 0 0 0-41.8816-105.5232z m-223.6928 157.2352c-1.1776-2.56-2.304-5.12-3.328-7.8848a121.1392 121.1392 0 0 1-6.6048-24.6784 123.2384 123.2384 0 0 1 121.8048-142.7968 123.392 123.392 0 1 1 0 246.7328 123.904 123.904 0 0 1-111.872-71.3728z"
                              p-id="5181"></path>
                        <path d="M841.5744 749.312h-84.992v-92.7744a14.592 14.592 0 1 0-29.0304 0v108.6464a15.36 15.36 0 0 0 14.5408 15.8208h99.4816a15.9232 15.9232 0 0 0 0-31.6928z"
                              p-id="5182"></path>
                    </svg>
                    <span>学习日历</span>
                </li>
            </ul>
        </div>
        <div class="context">
            <div v-for="item in lists" :key="item.channel_info.id" v-if="item.channel_info.id===4" class="context-wrap">
                <h2 class="title">{{item.channel_info.name}}</h2>
                <list v-for="(li,index) in item.list"
                      class="list1"
                      @xh="teacherList"
                      :name="li.teacher_name"
                      :img="li.teacher_avatar"
                      :text="li.introduction"
                      @click="GOtoXq(li.teacher_id)"
                      :key="li.teacher_id"/>
            </div>
            <br>
            <div v-for="item in lists" :key="item.channel_info.id" v-if="item.channel_info.id===2" class="context-wrap">
                <h2 class="title">{{item.channel_info.name}}</h2>
                <Excellent v-for="(li,index) in item.list"
                           class="list1"
                           :text="li.title"
                           :periods="li.total_periods"
                           :people="li.sales_num"
                           :name="li.teachers_list[0].teacher_name"
                           :img="li.teachers_list[0].teacher_avatar"
                           :price="li.price"
                           :date="[0,0]"
                           :has_buy="li.has_buy"
                           @click="goToxq(li.id)"
                           :key="li.id"/>
            </div>
            <br>
            <div v-for="item in lists" :key="item.channel_info.id" v-if="item.channel_info.id===5" class="context-wrap">
                <h2 class="title">{{item.channel_info.name}}</h2>
                <Excellent v-for="(li,index) in item.list"
                           class="list1"
                           :text="li.title"
                           :people="li.sales_num"
                           :periods="li.total_periods"
                           :name="li.teachers_list[0].teacher_name"
                           :img="li.teachers_list[0].teacher_avatar"
                           :price="li.price"
                           :date="[0,0]"
                           @click="goToxq(li.id)"
                           :has_buy="li.has_buy"
                           :key="li.id"/>
            </div>
            <br>
            <div v-for="item in lists" :key="item.channel_info.id" v-if="item.channel_info.id===3" class="context-wrap">
                <h2 class="title">{{item.channel_info.name}}</h2>
                <list v-for="(li,index) in item.list"
                      class="list1"
                      :name="li.teacher_name"
                      :img="li.teacher_avatar"
                      :text="li.introduction"
                      :level="li.level_name"
                      @click="GOtoXq(li.teacher_id)"
                      :key="li.teacher_id"/>
            </div>
        </div>
        <TCK v-show="tckshow"  @tckshowF="tckshowF"   @denglu="denglu"/>
    </div>
</template>

<script>
    import list from '../components/home/List'
    import Excellent from '../components/home/Excellent'
    import TCK from "../components/home/TCK";

    export default {
        name: 'Home',
        components: {
            list,
            Excellent,
            TCK
        },
        data() {
            return {
                tckshow: false
            }
        },
        computed: {
            banner() {
                return this.$store.state.home.banner
            },
            lists() {
                console.log(this.$store.state.home.list)
                return this.$store.state.home.list
            }
        },
        mounted() {
            // window.scrollTo(0,0)
            this.$store.dispatch('banners')
            this.$store.dispatch('getList')
        },
        methods: {
            teacherList() {
                // console.log('aa')
            },
            GOtoXq(id) {
                if (
                    !localStorage.getItem("adminToken") ||
                    localStorage.getItem("adminToken") == null
                ) {
                    this.tckshow = true;
                } else {
                    this.$router.push({
                        path: "/teacher",
                        query: {
                            id
                        }
                    })
                }
            },
            //登录
            denglu() {
                this.$router.push('/logon')
            },

            tckshowF() {
                this.tckshow = false
            },
            //去详情
            goToxq(id) {
                this.$router.push({
                    path: '/course',
                    query: {
                        id
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .list1 {
        width: 85%;
        margin: 20px auto;
        padding: 40px 2.5%;
        border-radius: 10px;
    }

    .context {
        font-family: PingFangSC-Medium;
        margin-bottom: 150px;
    }

    .title {
        line-height: 4.56667vw;
        font-size: 4.26667vw;
        font-weight: 500;
        border-left: 5px solid #EB6100;
        padding-left: 20px;
        width: 85%;
        margin: 0 auto;
        color: #595959;
    }

    .top-swiper {
        width: 100vw;

        img {
            width: 100vw;
        }
    }

    .div1 {
        width: 100px;
    }

    .index-kinds {
        width: 100%;
        position: relative;
        height: 200px;

        ul {
            width: 100%;
            display: flex;
            justify-content: space-around;
            position: absolute;
            top: -50px;

            li {
                width: 204px;
                height: 204px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                background-color: #fff;
                border-radius: 10px;
                color: #999;


                svg {
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
</style>